<%--
    活动列表页面
    Author: Zhelang
    Date: 2023-12-12
    Version: 1.0
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="m" uri="/WEB-INF/tld/mytag.tld"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>活动列表</title>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" type="text/css" href="<c:url value='/resources/css/bootstrap.css'/>">
    <link rel="stylesheet" type="text/css" href="<c:url value='/resources/css/style.css' />">
    <script src="<c:url value='/resources/js/bootstrap.bundle.js'/> "></script>
</head>
<body>
    <div class="page-container">
    <header>
        <jsp:include page="userHeader.jsp"/>
    </header>

    <div class="content">
        <div class="container" style="min-width: 750px;">
            <!-- 活动搜索框：根据活动名称搜索  -->
            <nav class="navbar bg-body-tertiary">
                <div class="container-fluid">
                    <div class="fs-4 fw-bolder">活动列表</div>
                    <form class="d-flex" role="search" action="<c:url value='/user/activities' />" method="get">
                        <input type="search" class="form-control me-2" placeholder="输入活动名称" name="activityName" aria-label="Search">
                        <button class="btn btn-outline-success text-nowrap" type="submit" id="search">搜索</button>
                    </form>
                </div>
            </nav>
            <!-- Activity信息列表  -->
            <div class="list-group" style="min-width: 600px; ">
                <br>
                <c:if test="${not empty activityList}">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th scope="col">ID</th>
                                <th scope="col">活动名称</th>
                                <th scope="col">开始时间</th>
                                <th scope="col">结束时间</th>
                                <th scope="col">活动地点</th>
                                <th scope="col">活动详情</th>
                                <th scope="col"></th>
                            </tr>
                        </thead>
                        <c:forEach items="${activityList}" var="activity" varStatus="loop" begin="${(currentPage-1)*10}" end="${currentPage*10-1}">
                            <tr>
                                <th scope="row">${activity.activityID}</th>
                                <td>${activity.activityName}</td>
                                <td><fmt:formatDate value="${activity.startTime}" pattern="yyyy-MM-dd HH:mm" /></td>
                                <td><fmt:formatDate value="${activity.endTime}" pattern="yyyy-MM-dd HH:mm" /></td>
                                <td>${activity.place}</td>
                                <td>
                                    <a class="btn btn-outline-secondary" href="<c:url value='/user/activityInfo?activityID=${activity.activityID}' />">活动详情</a>
                                </td>
                            </tr>
                        </c:forEach>
                    </table>
                </c:if>
                <c:if test="${empty activityList}">
                    <p style="color: red;">未查找到该活动</p>
                </c:if>
            </div>

            <!-- 分页展示 -->
            <div class="d-flex justify-content-evenly">
                <c:if test="${currentPage > 1}">
                    <div class="pre-page">
                        <a href="<c:url value='/user/activities?pageNo=${currentPage - 1}'/>" class="btn btn-outline-secondary">&lt; 上一页</a>
                    </div>
                </c:if>
                <c:if test="${currentPage <= 1}">
                    <div class="pre-page">
                        <a href="<c:url value='/user/activities?pageNo=${currentPage - 1}'/>" class="btn btn-outline-secondary disabled">&lt; 上一页</a>
                    </div>
                </c:if>
                <p>第 ${currentPage} 页</p>
                <c:if test="${currentPage < totalPage}">
                    <div class="next-page">
                        <a href="<c:url value='/user/activities?pageNo=${currentPage + 1}'/>" class="btn btn-outline-secondary">下一页 &gt;</a>
                    </div>
                </c:if>
                <c:if test="${currentPage >= totalPage}">
                    <div class="next-page">
                        <a href="<c:url value='/user/activities?pageNo=${currentPage + 1}'/>" class="btn btn-outline-secondary disabled">下一页 &gt;</a>
                    </div>
                </c:if>
                <c:if test="${empty activityList}">
                    <p style="color: red;">未找到活动</p>
                </c:if>
            </div>
        </div>
    </div>

    <footer>
        <m:footer/>
    </footer>
</div>
</body>
</html>
